<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pool Test</title>
    <meta name="description" content="Pool - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="./components/laser.js"></script>
    <script src="./components/spaceship.js"></script>
    <style>
      body { background-color: black; }
      .message {
        position: absolute;
        height: 200px;
        width: 600px;
        top: calc(50% - 100px);
        left: calc(50% - 200px);
        color: white;
        font-size: 18pt;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="message"><p>Left and right arrows to move and space bar to shoot</p><p>Used Pool Entities</p></div>
    <a-scene update-pool-message="messageEl: .message" stats pool="mixin: laser; size: 10">
      <a-assets>
        <a-mixin id="laser" laser></a-mixin>
      </a-assets>
      <a-entity
        position="0 -10 -10"
        wasd-controls="acceleration: 400; wsEnabled: false"
        spaceship></a-entity>
      <a-entity position="0 0 20">
        <a-entity camera="fov: 45"></a-entity>
      </a-entity>
    </a-scene>
  </body>
  <script>
    var message = '<p>Left and right arrows to move and space bar to shoot</p><p>Used Pool Entities ';
    AFRAME.registerComponent('update-pool-message', {
      schema: {
          messageEl: {type: 'selector'}
          },
      tick: function () {
        var poolComponent = this.el.components.pool;
        var poolSize = poolComponent.availableEls.length + poolComponent.usedEls.length;
        var usedPoolEntities = this.el.components.pool.usedEls.length;
        this.data.messageEl.innerHTML = message + usedPoolEntities + '/' + poolSize + '</p>';
      }
    });
  </script>
</html>
